import '../../../styles/Hospital Information/Hospitalintroduction.scss'
import React, { useEffect } from 'react';

// 导入echarts
import *as echarts from "echarts";

// 导入bmap
import 'echarts/extension/bmap/bmap'


function Hospitalintroduction(props) {


    var myChart;

    useEffect(() => {

        //3.实例化echarts
        myChart = echarts.init(document.getElementById('main'))

        // 绘图
        myChart.setOption({
            title: { text: '医院地址', left: 'left' },
            bmap: {
                center: [104.114129, 37.550339],
                zoom: 5,
                roam: true, //设置允许缩放以及拖动的效果
            }
        })

        //5.设置百度地图
        var bMap = myChart.getModel().getComponent('bmap').getBMap();

        //添加地图控件 ,  注意: BMap,BMAP_SATELLITE_MAP 等都是自动添加在window对象身上的, 需要通过window对象引用.
        bMap.addControl(new window.BMap.MapTypeControl({
            mapTypes: [
                window.BMAP_SATELLITE_MAP, //卫星地图
                window.BMAP_NORMAL_MAP, //标准地图
                window.BMAP_PERSPECTIVE_MAP //三维地图
            ]
        }), []);

        bMap.addControl(new window.BMap.OverviewMapControl());//添加可折叠的缩略地图控件
        bMap.addControl(new window.BMap.ScaleControl());//平移和缩放
        bMap.setMapType(window.BMAP_NORMAL_MAP); //设置地图类别


    })
    return (
        <div className='intro'>
            <div id="main" style={{ width: '100%', height: 300 }}></div>
        </div>
    );
}

export default Hospitalintroduction;